import React from 'react';
import {StyleSheet, View} from 'react-native';
import ScrollableTabView, {ScrollableTabBar} from 'react-native-scrollable-tab-view';
import Toast from 'react-native-easy-toast';

import List from './list';
import Header from '../../../components/header';
import auth from '../../../common/auth';

export default class extends React.Component {
    //toast弹出
    showToast = (text, time = 1000) => {
        this.refs.toast.show(text, time);
    };

    componentDidMount() {
        auth.getUserInfo()
            .catch(() => {
                auth.goBack();
            });
    }

    render() {
        return (
            <View style={styles.container}>
                <Header title="订单"/>
                <ScrollableTabView
                    renderTabBar={() => <ScrollableTabBar
                        tabStyle={{height: 40}}
                        style={{height: 41}}/>}
                    style={{flex: 1, marginTop: 1}}
                    tabsContainerStyle={{height: 40}}
                    tabBarBackgroundColor="#fff"
                    tabBarActiveTextColor="#ff300b"
                    tabBarInactiveTextColor="#040404"
                    tabBarUnderlineStyle={{height: 0}}
                >
                    <List order_status={0} showToast={this.showToast} tabLabel="全部"/>
                    <List order_status={12} showToast={this.showToast} tabLabel="已付款"/>
                    <List order_status={3} showToast={this.showToast} tabLabel="已结算"/>
                    <List order_status={13} showToast={this.showToast} tabLabel="已失效"/>
                </ScrollableTabView>
                <Toast ref="toast" position="center"/>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#f0f0f0',
        flex: 1
    }
});
